import React, { createContext, useState, useEffect, useRef } from 'react';
import { Toast, Modal, Dialog, Input, Calendar, Image } from 'antd-mobile'
import HeadTop from '@/components/HeadTop';
import FooterInfinite from '@/components/FooterInfinite';
import SelectCalendar from '@/components/SelectCalendar';
import { validatenull } from "@/utils/validate";
import { dateTimeFormatter } from "@/utils/utils";
import ListItem from '../_parts/ListItem';
import ApiIndex from '@/api/maintenance';
import "./index.less"

import { MyContext } from '@/context/index';
const { Provider, Consumer } = MyContext

const CancelPop = ({ setTxt }) => {
    const [cancelTxt, setCancelTxt] = useState('');
    return (
        <div className="cancel-modal">
            <p>取消原因</p>
            <Input
                placeholder='请输入内容'
                value={cancelTxt}
                onChange={val => {
                    setTxt(val)
                    setCancelTxt(val)
                }}
            />
        </div>
    )
}
const EditTime = (props) => {
    const [valTxt, setValTxt] = useState(new Date());
    const [editTxt, setEditTxt] = useState('');
    const canlendar = useRef(null)

    const changeCalendar = () => {
        canlendar.current.changeVisivle()
    }
    const getCanlendarVal = (val) => {
        setValTxt(val)
        props.sendTime(val, editTxt)
    }
    return (
        <div className="cancel-modal">
            <p>修改时间</p>
            <div className="time-line">
                <Image src="../../../assets/img/arrow_back.png" alt="" />
                <span onClick={changeCalendar}>{dateTimeFormatter(valTxt, 'yyyy-MM-dd')}</span>
            </div>
            <div className="reason-line">
                <Input
                    placeholder='请输入内容'
                    value={editTxt}
                    onChange={val => {
                        setEditTxt(val)
                    }}
                />
            </div>

            <SelectCalendar ref={canlendar} getCanlendarVal={getCanlendarVal}></SelectCalendar>
        </div>
    )
}

function Index ({ history }) {
    const [List, setList] = useState([]); //列表
    const [hasMore, setHasMore] = useState(true) //上拉
    const [pageNum, setPageNum] = useState(1) //页码
    const [timeVal, setTimeVal] = useState(1)

    let loading = false
    const getRequest = async (change) => {
        if (loading) return
        loading = true
        let params = {
            page: pageNum,
            size: 10,
            type: 'MAINTAIN',
            status: 'FINISH'
        }

        let res = await ApiIndex.getList(params)
        if (res.data.code) {
            Toast.show({
                content: '请求失败:' + res.data.msg,
            })
            return
        }
        if (res.data.data.records.length) {

            let list = res.data.data.records
            if (change) {
                setList(list)
            } else {
                setList(List.concat(list))
            }
            setHasMore(true)
            setPageNum(pageNum + 1)
            loading = false
        }
        if (res.data.data.current == res.data.data.pages || !res.data.data.pages) {
            setHasMore(false)
            loading = true
        }
    }

    // 搜索
    const sendHandlePressVal = (value) => {
        if (validatenull(value)) return
        let _value = value
        if (value.indexOf("*") != -1) {
            _value = value.split("*")[0]
        }

        handleDebounce(_value, List)
    }
    const handleDebounce = (value, list) => {
        if (list.length < 1) {
            Toast.show({
                content: '暂无数据:'
            })
            return
        }

        let arr = list.filter(el => el.deviceCode == value)
        if (!arr.length) {
            Toast.show({
                content: '暂无匹配数据:'
            })
            return
        }
        arr.length && setList(arr)
    }

    return (
        <div className='page-wrapper'>
            <Provider value={{ placeholderTxt: "请输入保养编号" }}>
                <HeadTop
                    title="设备保养记录"
                    history={history}
                    search={true}
                    sendHandlePressVal={sendHandlePressVal}
                ></HeadTop>
            </Provider>
            <div className="page-body" style={{ padding: 15 }}>
                {
                    !List?.length ?
                        <div className='no-list-data'>
                            无更多数据
                        </div> : (
                            List.map(el =>
                                <ListItem
                                    item={el}
                                    history={history}
                                    hideRight={true}
                                    key={el.id}>
                                </ListItem>)
                        )
                }
                <FooterInfinite getRequest={getRequest} hasMore={hasMore}></FooterInfinite>
            </div>
        </div>
    );
}

export default Index;
